<template>
    <div class="areas">
        <div class="content">
            <div class="left">地区：</div>
            <ul>
                <li :class="{active:activeArea == ''}" @click="activeArea = ''">全部</li>
                <li v-for="item in areaList" :key="item.value"
                    :class="{active:activeArea == item.value}"
                    @click="changeArea(item.value)"
                >
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts" name="Areas">
    import {reqHospitalDict} from '@/api/home'
    import {onMounted,ref} from "vue";
    import type {HospitalLevelResponseData,HospitalLevelArr} from "@/api/home/type";

    let areaList = ref<HospitalLevelArr>([]);
    let activeArea = ref<string>('');
    onMounted(()=>{
        getRegion();
    })

    const getRegion = async () => {
        const result: HospitalLevelResponseData = await reqHospitalDict('Beijing');
        if (result.code === 200){
            areaList.value = result.data;
        }
    }

    // 自定义事件传递参数
    const $emit = defineEmits(['getArea']);
    const changeArea = (item:string) => {
        $emit('getArea',item);
    };

</script>

<style scoped>
    *{
        padding:0;
        margin:0;
        box-sizing: border-box;
        list-style: none;
        font-size: 14px;
    }
    .areas{
        color: #7f7f7f;
        margin-top: 10px;
        .content{
            display: flex;
            .left{
                margin-left: 10px;
                width: auto;
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    margin-right: 5px;
                    margin-bottom: 5px;
                    &.active{
                        color: #55a6fe;
                    }
                }
                li:hover{
                    color: #55a6fe;
                    cursor: pointer;
                }
            }
        }
    }
</style>